.clearfix() {
    &::after {
        content: "";
        display: block;
        clear: both;
    }
}

// grid
.loop-list(@grid-size: ~'') {
    .list(@index) {
        @item: ~'@{column-prefix}@{grid-size}@{index}';
        .list((@index+1), @item)
    }
    .list(@index, @list) when (@index<=@grid-columns) {
        @item: ~'@{column-prefix}@{grid-size}@{index}';
        .list((@index+1), ~'@{list}, @{item}')
    }
    .list(@index, @list) when (@index > @grid-columns) {
        @{list} {
            position: relative;
            flex: 0 0 auto;
        }
    }
    .list(1)
}

.loop-column(@grid-columns, @grid-size: ~'', @index: 1) when (@index =< @grid-columns) {
    .@{column-prefix}@{grid-size}@{index} {
        width: (@index * 100% / @grid-columns);
    }
    .loop-column(@grid-columns, @grid-size, (@index+1))
}

.loop-offset(@grid-columns, @grid-size: ~'', @index: 1) when (@index =< @grid-columns) {
    .offset-@{grid-size}@{index} {
        margin-left: (@index * 100% / @grid-columns);
    }
    .loop-offset(@grid-columns, @grid-size, (@index+1))
}

.loop-order(@grid-columns, @grid-size: ~'', @index: 1) when(@index =< @grid-columns) {
    .order-@{grid-size}@{index} {
        order: @index;
    }
    .loop-order(@grid-columns, @grid-size, (@index+1))
}

.loop-pull(@grid-columns, @grid-size: ~'', @index: 1) when (@index =< @grid-columns) {
    .pull-@{grid-size}@{index} {
        right: (@index * 100% / @grid-columns);
    }
    .loop-pull(@grid-columns, @grid-size, (@index+1))
}

.loop-push(@grid-columns, @grid-size: ~'', @index: 1) when (@index =< @grid-columns) {
    .push-@{grid-size}@{index} {
        left: (@index * 100% / @grid-columns);
    }
    .loop-push(@grid-columns, @grid-size, (@index+1))
}

.make-grid(@grid-size: ~'') {
    .container {
        width: (@grid-size - @gutter-20);
        max-width: 100%;
        padding-left: @gutter-20 / 2;
        padding-right: @gutter-20 / 2;
    }
}

.make-column(@grid-columns, @grid-size: ~'') {
    .loop-list(@grid-size);
    .loop-column(@grid-columns, @grid-size);
    .loop-order(@grid-columns, @grid-size);
    .loop-offset(@grid-columns, @grid-size);
    .loop-pull(@grid-columns, @grid-size);
    .loop-push(@grid-columns, @grid-size);
}